@import "variables";
@import "mixins";

#keyboard li.letter,#keyboard li.symbol {
  font-size: 2em;
}
#keyboard {
  margin: 0;
  padding: 0;
  list-style: none;

  li:hover {
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #e5e5e5;
    cursor: pointer;
  }

  .on {
    display: none;
  }

  .space {
    clear: left;
    width: 335px;
    margin-right: 2px;
  }

  .unit-btn {
    background-color: #ddd !important;
    color: #000;
    font-size: 1.5em;
    font-weight: normal;
  }

  .nobtn {
    background-color: transparent;
  }
  .capslock {
    width: 80px;
  }
  .lastitem {
    margin-right: 0;
  }
  .right-shift {
    width: 80px;
  }
  .uppercase {
    text-transform: uppercase;
  }

  li.tab1 {
    display: block;
  }

  li.tab2 {
    display: none;
  }

  li {
    float: left;
    margin: 0 3px 3px 0;
    width: 82px;
    height: 82px;
    line-height: 82px;
    text-align: center;
    background: #fff;
    color:#444;
    .border-radius(10px);
  }

  .left-shift {
    width: 95px;
  }

  .return {
    width: 80px;
  }
}

#keyboard-modal {
  position:absolute;
  top:0px;
  left: 0px;
  text-align: center;
  z-index: 400;
  width: 100%;
  height: 100%;
  background-color:#000;
  opacity:0.5;
}

#keyboard.frq {

  .capslock {
    width: 108px;
  }

  li {
    width: 106px;
    height: 106px;
    border: 2px solid #666;
    line-height: 106px;
    .border-radius(30px);
  }

  #write {
    margin: 0;
    padding: 5px 10px;
    width: 650px;
    height: 38px;
    font: bold 32px Sans-Serif;
    background: #fff;
    border: 2px solid #666;
    .border-radius(20px);
  }

  .return {
    width: 108px;
  }
}

#keyboard.frq .tab,
#keyboard.frq .delete {
  width: 108px;
}

#keyboard li.active,
#keyboard li.activefoo {
  background-color: blue !important;
  color: white !important;
}
#keyboard .tab,
#keyboard .left-shift {
  clear: left;
}

#keyboard-positioner {
  font: 90%/1.5 Verdana, Sans-Serif;
  position:absolute;
  top:2px;
  left: 0px;
  text-align: center;
  z-index: 401;
  width: 100%;
  height: 100%;
  text-shadow: none;
}
#keyboard .delete,
#keyboard .capslock,
#keyboard .close,
#keyboard .done,
#keyboard .left-shift,
#keyboard .reset,
#keyboard .right-shift,
#keyboard .tab,
#keyboard .return,
#keyboard .switch,
#keyboard .frq-delete,
#keyboard .cancel {
  background-color: #c0c0c0 !important;
  color: #000;
  font-weight: bold;
}

#keyboard .tab,
#keyboard .delete {
  width: 80px;
}
#keyboard-container {
  margin: auto;
  width: 680px;
  text-align:left;
  .user-select(none);

  #write {
    margin: 0;
    padding: 5px 10px;
    width: 650px;
    height: 38px;
    font: 1.8em/1.2 Verdana, Sans-Serif;
    font: bold 32px Sans-Serif;
    background: #fff;
    border: 2px solid #666;
    .border-radius(20px);
  }
}